<template>
    <ul class="app-header-nav">
        <li class="item">
            <RouterLink class="link" to="/">首页</RouterLink>
        </li>
        <li class="item" v-for="item in list" :key="item.id" @mouseenter="show(item)" @mouseleave="hide(item)">
            <RouterLink class="link" :to="'/category/' + item.id" @click="hide(item)">{{ item.name }}</RouterLink>
            <div class="layer" :class="{ active: item.open }">
                <ul>
                    <li v-for="elem in item.subCateGroupList" :key="elem.id">
                        <a href="#">
                            <img :src="elem.categoryList[0].bannerUrl" alt="/">
                        </a>
                        <div>{{ elem.name }}</div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
export default {
    setup(props) {
        const store = useStore()
        //从仓库中读取分类列表
        const list = computed(() => {
            return store.state.category.cateList
        });
        const show = (item) => {
            item.open = true
        }
        const hide = (item) => {
            item.open = false
        }
        return { list, show, hide }
    }
}

</script>

<style lang="less" scoped>
.app-header-nav {
    position: relative;
    clear: both;
    z-index: 2;

    .item {
        float: left;
        padding: 0 10px;
        font-weight: bold;
        height: 40px;
        line-height: 40px;

        //选中高亮设置
        .router-link-exact-active {
            color: @xtxColor;
            border-bottom: 2px solid @xtxColor;
        }

        .link {
            font-size: 15px;
            padding-bottom: 5px;
        }

        //鼠标滑过设置
        &:hover {
            .link {
                color: @xtxColor;
                border-bottom: 2px solid @xtxColor;
            }

            .layer {
                opacity: 0;
                height: 120px;
            }

            .active {
                opacity: 1;
            }
        }
    }

    .layer {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        opacity: 0;
        top: 42px;
        width: 1100px;
        height: 0;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0 0 5px #ccc;
        overflow: hidden;
        transition: all 0.5s;

        ul {
            display: flex;

            li {
                height: 100px;
                width: 100px;
                text-align: center;

                a {
                    border-bottom: 0;
                }

                img {
                    width: 50px;
                    height: 50px;
                    text-align: center;
                }

                &:hover {
                    background-color: #f7f7f7;
                }
            }
        }
    }
}
</style>